<template>
  <q-modal v-model="modalVisible" :header="taskCode" :menuBtn="false" :persistent="false" nonScrollArea width="78%">
    <template v-slot:default="{ maxHeight }">
      <q-tabs v-model="tab" :breakpoint="0" active-color="primary" align="justify" class="bg-grey-4" dense
              indicator-color="primary">
        <q-tab v-for="col in columns" :key="col.field" :disable="!taskCode" :label="col.label" :name="col.field"
               class="q-py-sm" />
      </q-tabs>
      <q-tab-panels v-model="tab" :style="{ maxHeight: `calc(${maxHeight} - 5rem`}" animated class="col">
        <q-tab-panel key="0" class="no-padding" name="0">
          <TaskInfo v-model="modalVisible" :taskCode="taskCode"></TaskInfo>
        </q-tab-panel>
        <q-tab-panel key="1" class="no-padding" name="1">
          <TaskNotificationList :taskCode="taskCode"></TaskNotificationList>
        </q-tab-panel>
        <q-tab-panel key="2" class="no-padding" name="2">
          <TrafficControlNotification :taskCode="taskCode"></TrafficControlNotification>
        </q-tab-panel>
      </q-tab-panels>
    </template>
  </q-modal>
</template>
<script setup>
import { i18n } from 'boot/i18n'
import TaskInfo from 'src/views/TaskCore/TaskInfo.vue'
import TaskNotificationList from 'src/views/TaskCore/TaskNotificationList.vue'
import TrafficControlNotification from 'src/views/TaskCore/TrafficControlNotification.vue'
import { computed, ref, watch } from 'vue'

const props = defineProps({ taskCode: { type: String } })
const modalVisible = defineModel('modelValue', { type: Boolean, default: false })
const tab = ref('0')
const columns = computed(() => {
  return [{
    label: `${i18n.t('SystemCore.BasicInformation')}`, field: '0'
  }, {
    label: `${i18n.t('TaskCore.TaskNotification')}`, field: '1'
  }, {
    label: `${i18n.t('TaskCore.TrafficControlNotification')}`, field: '2'
  }]
})
watch(() => props.taskCode, val => !val && (modalVisible.value = false))
</script>
<style lang="scss" scoped>
.q-tab-panels:deep(.q-panel), .q-tab-panels:deep(.q-tab-panel) {
  max-height: inherit;
}
</style>